import { useState } from 'react'
import './ShoppingCar.scss'
import img1 from '../../../assets/images/wallhaven-m9elv9.jpg'
import img2 from '../../../assets/images/wallhaven-6ozg2w.jpg'
import img3 from '../../../assets/images/wallhaven-o38ell.jpg'
import img4 from '../../../assets/images/wallhaven-z8jdgv.jpg'
const ShoppingCar = () => {
  const [list, setList] = useState({
    list: [
      {
        checkbox: false,
        taste: [
          {
            img: img1,
            title: '烤鱿鱼串',
          },
        ],
        select: [
          { label: '果汁', value: '果汁' },
          { label: '橙汁', value: '橙汁' },
          { label: '雷碧', value: '雷碧' },
          { label: '阔乐', value: '阔乐' },
        ],
        price: '10.00',
        content: '1',
      },
      {
        checkbox: false,
        taste: [
          {
            img: img2,
            title: '烤羊肉串',
          },
        ],
        select: [
          { label: '果汁', value: '果汁' },
          { label: '橙汁', value: '橙汁' },
          { label: '雷碧', value: '雷碧' },
          { label: '阔乐', value: '阔乐' },
        ],
        price: '15.00',
        content: '1',
      },
      {
        checkbox: false,
        taste: [
          {
            img: img3,
            title: '烤韭菜',
          },
        ],
        select: [
          { label: '果汁', value: '果汁' },
          { label: '橙汁', value: '橙汁' },
          { label: '雷碧', value: '雷碧' },
          { label: '阔乐', value: '阔乐' },
        ],
        price: '3.00',
        content: '1',
      },
      {
        checkbox: false,
        taste: [
          {
            img: img4,
            title: '烤五花肉串',
          },
        ],
        select: [
          { label: '果汁', value: '果汁' },
          { label: '橙汁', value: '橙汁' },
          { label: '雷碧', value: '雷碧' },
          { label: '阔乐', value: '阔乐' },
        ],
        price: '13.00',
        content: '1',
      },
    ],
  })
  // select选择器
  const handSelect = (e) => {
    console.log(e.target.value)
  }
  const btnAdd = () => {
    setList({ ...list })
  }
  return (
    <div>
      <table border="1">
        <tbody>
          <tr>
            <td>
              {' '}
              <input type="checkbox" /> 全选
            </td>
            <td>口味必选</td>
            <td>免费配送畅饮/杯</td>
            <td>价格</td>
            <td>份数</td>
            <td>操作</td>
          </tr>
          {list.list.map((item, index) => {
            return (
              <tr key={index}>
                <td>
                  <input type="checkbox" />
                </td>
                <td>
                  {item.taste.map((item2, index2) => {
                    return (
                      <div key={index2}>
                        {' '}
                        <img
                          className="iconImg"
                          src={item2.img}
                          alt="111"
                        />{' '}
                        <span>{item2.title}</span>
                      </div>
                    )
                  })}
                </td>
                <td>
                  <select onChange={handSelect}>
                    {item.select.map((item3, index3) => {
                      return (
                        <option key={index3} value={item3.value}>
                          {item3.label}
                        </option>
                      )
                    })}
                  </select>
                </td>
                <td>￥{item.price}</td>
                <td>
                  {' '}
                  <button>-</button> {item.content} <button>+</button>{' '}
                </td>
                <td>
                  <button className="btndel">删除</button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
      <button onClick={btnAdd}>添加 </button>
    </div>
  )
}
export default ShoppingCar
